<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style type="text/css">
		:root {
			--color: #ff5555;
		}

		body,
		h1,
		h2,
		h3,
		ul,
		p {
			margin: 0;
			padding: 0;
			font-weight: normal;
			font-family: '仿宋',-apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, "Microsoft YaHei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
		}

		li {
			list-style: none;
		}

		.wrap {
			position: relative;
			width: 100%;
			height: 100vh;
		}

		.main {
			position: fixed;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%) scale(2);
			width: 500px;
			height: auto;
			text-align: center;
		}

		.main-title {
			margin-bottom: 30px;
			font-weight: bold;
			font-size: 50px;
		}

		.sub-title {
			font-size: 30px;
		}

		.days-wrap {
			margin: 20px auto;
			width: 160px;
			height: 80px;
			background: var(--color);
			font-size: 40px;
			line-height: 80px;
			color: #fff;
		}

		.date-wrap .times {
			display: inline-block;
			position: relative;
			width: 100px;
			height: 100px;
			border: 2px solid var(--color);
			box-sizing: border-box;
			border-radius: 50%;
			font-size: 55px;
			line-height: 100px;
			color: var(--color);
		}

		.date-wrap .times+.times {
			margin-left: 50px;
		}

		.times.hour::after,
		.times.minu::after,
		.times.seco::after {
			position: absolute;
			right: -10px;
			top: 42px;
			font-size: 18px;
			color: var(--color);
		}

		.times.hour::after {
			content: '时';
		}

		.times.minu::after {
			content: '分';
		}

		.times.seco::after {
			content: '秒'
		}

		body{
			background: url('./background.png') no-repeat;
			background-size: cover;
		}
	</style>
</head>

<body>
	<div class="wrap">
		<div class="main">
			<h1 class="main-title">距离2019年</h1>
			<h3 class="sub-title">俄罗斯喀山第45届世界技能大赛</h3>
			<div class="days-wrap"><span class="days">00</span>天</div>
			<div class="date-wrap">
				<ul>
					<li class="times hour">0</li>
					<li class="times minu">0</li>
					<li class="times seco">0</li>
				</ul>
			</div>
		</div>
	</div>
</body>
<script>
	(function () {
		var staTime = new Date().getTime(),
			endTime = new Date('2019/8/22').getTime(),
			leftTime = endTime - staTime;

		if (leftTime && leftTime > 0) {
			setInterval(function () {
				staTime = new Date().getTime();
				leftTime = endTime - staTime;
				
				// time group
				var days = parseInt(leftTime / 1000 / 60 / 60 / 24, 10),
					hours = parseInt(leftTime / 1000 / 60 / 60 % 24, 10),
					minutes = parseInt(leftTime / 1000 / 60 % 60, 10),
					seconds = parseInt(leftTime / 1000 % 60, 10);

				days = ('' + days).length > 1 ? days : '0' + days;
				hours = ('' + hours).length > 1 ? hours : '0' + hours;
				minutes = ('' + minutes).length > 1 ? minutes : '0' + minutes;
				seconds = ('' + seconds).length > 1 ? seconds : '0' + seconds;
				
				// object group
				var od = document.getElementsByClassName('days')[0],
					oh = document.getElementsByClassName('hour')[0],
					om = document.getElementsByClassName('minu')[0],
					os = document.getElementsByClassName('seco')[0];

				od.innerHTML = days;
				oh.innerHTML = hours;
				om.innerHTML = minutes;
				os.innerHTML = seconds;

			}, 1000); // Interval of end

		} else {
			return;
		} // if leftTime of end

	}()); // IIFE of end
</script>

</html>